<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>朔望 -照片提交</title>
    <!--    Rem初始-->
    <script src="/Syzygy/static/js/RemInitialize.js"></script>
</head>
<body id="body" style="margin: 0 0 ;padding: 0 0;background-color: rgb(230,230,230);">
<!--    返回-->
<a href="/Syzygy">
    <div style="position:fixed;width: 0.1rem;height: 0.51rem ">
    </div>
</a>
<a href="/Syzygy">
    <div style="position:fixed;right:0;width: 0.1rem;height: 0.51rem ">
    </div>
</a>

<!--卡片-->
<div style="background-color: rgb(200,200,200);width: 0.8rem;height: 0.5rem;margin: 0.005rem auto;border-radius: 0.03rem">

    <!--    图片-->
    <div style="float: left;width: 0.4rem;height: 0.5rem;display: flex;justify-content: center;align-items: center">
        <img id="imagePreview" style="float:left;max-width: 0.4rem;max-height: 0.5rem;margin: 0 auto">
    </div>

    <!-- 图片上传-->
    <div style="float:left;width: 0.4rem">
        <!--   图片上传 -->
        <div style="width:0.4rem;height: 0.4rem;background-color: rgb(210,210,210);border-radius: 0 0.03rem 0 0;overflow: hidden">
            <form action="/Syzygy/Picture/" method="post" enctype="multipart/form-data" onsubmit="return checkUploadPicture()"
                  style="width: 0.3rem;height: 0.3rem;margin: 0.02rem 0.05rem;font-size: 0.015rem">
                <!--                图片上传与提示-->
                <input type="file" id="file" name="file"
                       accept="image/gif, image/jpeg, image/png, image/jpg" style="background: rgb(200,200,200);width: 0.3rem;height: 0.02rem;font-size: 0.013rem"></br>
                <p id="info"style=";background: rgb(200,200,200);width: 0.3rem;height: 0.055rem;margin: 0.01rem 0;font-size: 0.01rem"></p></br>
                <!--                图片描述-->
                请输入图片描述：
                <input id="describe"  maxlength="100" type="text" name="describe" style="background: rgb(190,190,190);width: 0.3rem;height: 0.1rem" ></br>
                <!--                价格-->
                请输入价格：</br>
                <input id="price"  type="text" name="price" style="background: rgb(190,190,190);width: 0.3rem;height: 0.02rem"></br>
                请选择类型：</br>
                <!--                类型-->

                <!--                提交-->
                <input id="submit2" type="submit" style="display: none"></br>

            </form>
        </div>

        <!--        添加类型导航-->
        <script th:inline="javascript">
            const submit = document.querySelector('#submit2');
            const allTypeJSON = [[${allTypeJSON}]];
            let allType = JSON.parse(allTypeJSON);

            // 添加类型导航
            for (let i = 0; i < allType.length; i++) {
                let typeId = allType[i].typeId;
                let typeName = allType[i].typeName;
                let typeStr = `
            <!--  类别单选按钮 -->
                <input type="radio" name="typeId" value="${typeId}" style="background: green">${typeName}
        `;
                submit.insertAdjacentHTML("beforebegin", typeStr);
            }

        </script>

        <!--        图片页面显示-->
        <script type="text/javascript">
            let fileInput = document.getElementById('file');
            let info = document.getElementById('info');
            let preview = document.getElementById('imagePreview');
            // 监听change事件:
            fileInput.addEventListener('change', function () {
                // 清除背景图片:
                preview.style.backgroundImage = '';
                if (!fileInput.value) {
                    info.innerHTML = '没有选择文件';
                    return;
                }
                let file = fileInput.files[0];
                let size = file.size;
                if (size >= 50 * 1024 * 1024) {
                    alert('文件大小超出限制');
                    info.innerHTML = '文件大小超出限制';
                    return false;
                }
                // 获取File信息:
                info.innerHTML = `文件名称:  + ${file.name}<br>文件大小: ${file.size} <br>上传时间: ${file.lastModifiedDate}`;
                if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
                    alert('不是有效的图片文件!');
                    return;
                }
                // 读取文件:
                let reader = new FileReader();
                reader.onload = function (e) {
                    let data = e.target.result;
                    preview.src = data
                };
                // 以DataURL的形式读取文件:
                reader.readAsDataURL(file);

            });
        </script>

        <!--        为空验证  -->
        <script type="text/javascript">
         function checkUploadPicture() {
                let fileInput = document.getElementById('file');
                let fileInputValue = fileInput.value;
                let describeInput = document.getElementById('describe');
                let describeInputValue = describeInput.value;
                let priceInput = document.getElementById('price');
                let priceInputValue = priceInput.value;
                let priceCheck = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
                if (null == fileInputValue){
                    alert('未上传图片!')
                    return false;
                }
                if (null == describeInputValue){
                    alert('未填写图片描述!')
                    return false;
                }
                if (!priceCheck.test(priceInputValue)){
                    alert('请输入正确图片价格!')
                    return false;
                }

                let typeInput = document.getElementsByName('typeId');
                let typeInputHave = false;
                for (let i = 0; i <typeInput.length; i++) {
                    if (typeInput[i].checked){
                        typeInputHave = true;
                    }
                }
                if (typeInputHave == false){
                    alert('请选择图片类型!')
                    return false;
                }

                return true;
            }
        </script>

        <!--   发布 -->
        <div style="background-color: rgb(190,190,190);width:0.4rem;height: 0.1rem;border-radius:0 0 0.03rem 0;position: absolute">
            <div style="background-color: red;width: 0.36rem;height:0.03rem;margin: 0.01rem 0.02rem 0.02rem 0.02rem">
                <!--                点赞-->
                <div style="float:left;background-color: greenyellow;width: 0.09rem;height: 0.03rem">
                </div>
                <!--                收藏-->
                <div style="float:left;background-color: saddlebrown;width: 0.09rem;height: 0.03rem">
                </div>
                <!--                评价 -->
                <div style="float:left;background-color: greenyellow;width: 0.09rem;height: 0.03rem">
                </div>
                <!--                分享 -->
                <div style="float:left;background-color: saddlebrown;width: 0.09rem;height: 0.03rem">
                </div>
            </div>
            <div style="width: 0.36rem;height:0.03rem;margin: 0 0.02rem 0.02rem 0.02rem">
<!--                评价-->
                <div style="background-color:coral;float:left;width: 0.16rem;height:0.03rem;margin: 0 0.01rem;border-radius: 0.03rem;">
                    <div style="font-size: 0.02rem;text-align: center">
                        评价
                    </div>
                </div>
<!--                提交-->
                <div style="background-color: #007aff;float:left;width: 0.16rem;height:0.03rem;margin: 0 0.01rem;border-radius: 0.03rem;">
                    <button style="float:left;font-size: 0.02rem;text-align: center" onclick="doSubmit()">
                        提交
                    </button>
                    <script>
                        function doSubmit(){
                            let submit2 = document.getElementById('submit2');
                            submit2.click();
                        }
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>